// 提供一个能够显示xtx-message.vue中代码地函数
// 这个函数可以挂载到vue实例中使用，也可以直接导入使用
// 直接导入：message{{type:"error",text:"提示文字"}}
// 挂载实例：this.message({type:'error',text:'提示文字'})
import { createVNode, render } from 'vue'
import Xtxmessage from './xtx-message.vue'
const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)
let timer = null
export default ({ type, text }) => {
  //! createVNode将xtx-message.vue组件编译为虚拟dom节点
  const vnode = createVNode(Xtxmessage, { type, text })
  // ?其中render函数的作用是，Node节点信息return返回给Vue.js底层处理文件中的beforeMount()生命周期钩子函数，让其将Node节点信息在界面中渲染出来
  //! render(虚拟节点，dom容器)
  render(vnode, div)
  // 2秒后销毁组件
  clearTimeout(timer) // 先清除定时器，防止定时器多次绑定
  timer = setTimeout(() => {
    console.log(111)
    render(null, div)
  }, 2000)
}
